<div class="box-container">
    <p class="process-bar" (click)="openProgressModal()">
        <b><i nz-icon nzType="clock-circle" nzTheme="fill" class="yellow"></i> &nbsp;报送进度:</b>&nbsp;
        已报/未报:&nbsp;
        <span class="green">{{reportFinished}}</span>/
        <span class="red">{{reportUnfinished}}</span>&nbsp;
        <span class="green">（占比{{reportPercentage}}%）</span>&nbsp;&nbsp;&nbsp;
        &nbsp;<b><i nz-icon nzType="info-circle" nzTheme="fill" class="yellow"></i> &nbsp;运行状态:</b>&nbsp;
        正常&nbsp;<span class="green">100%</span>&nbsp;&nbsp;异常&nbsp;<span class="red">0%</span>
    </p>
    <div class="main-content">
        <div class="main-content-wrap">
            <div class="left-panel">
                <ul nz-menu nzMode="inline" class="water-takes-left-menu">
                    <li nz-menu-item
                        *ngFor="let item of listData; let idx = index"
                        [nzSelected]="idx === 0"
                        (click)="selectedAreaChanged(item.id)">
                        {{item.name}}
                    </li>
                </ul>
            </div>

            <div class="right-panel">
                <div class="right-top-box">
                    <div class="content-top-bar">
                        <div class="right-title">{{contentTitle}}</div>

                        <div class="right-ctrl-box">
                            <div style="margin-right: 20px">(水位： m; 流量： m³/s)</div>
                            <div>
                                日期：
                                <nz-date-picker [(ngModel)]="today" (ngModelChange)="getMainContentData($event)"></nz-date-picker>
                            </div>

                            <div class="custom-btn-group">
                                <a class="top-bar-btn" (click)="openDetailModal()">
                                    <i nz-icon nzType="history" nzTheme="outline"></i> 历史记录
                                </a>
                                <a class="top-bar-btn" (click)="exportFile()">
                                    <i nz-icon nzType="file-excel" nzTheme="outline"></i> 导出
                                </a>
                                <!--<a class="top-bar-btn" (click)="print()">-->
                                <!--<i nz-icon nzType="printer" nzTheme="outline"></i>-->
                                <!--</a>-->
                            </div>
                        </div>
                    </div>

                    <div class="right-top-content">
                        <ng-container *ngIf="tempType === '1'">
                            <div style="width: 100%">
                                <nz-table
                                    #editRowTable
                                    class="main-table canal-table"
                                    [nzData]="tableData"
                                    nzBordered
                                    [nzHideOnSinglePage]="true"
                                    nzSize="middle"
                                >
                                    <thead>
                                    <tr class="custom-head">
                                        <th rowspan="2">名称</th>
                                        <th rowspan="2" style="font-weight: bold">警戒水位</th>
                                        <th rowspan="2" style="font-weight: bold">限定流量</th>
                                        <th colspan="2">4时</th>
                                        <th colspan="2">8时</th>
                                        <th colspan="2">12时</th>
                                        <th colspan="2">16时</th>
                                        <th colspan="2">20时</th>
                                        <th colspan="2">24时</th>
                                        <th rowspan="2" style="font-weight: bold">日均流量</th>
                                    </tr>
                                    <tr class="custom-head">
                                        <th>水位</th>
                                        <th>流量</th>
                                        <th>水位</th>
                                        <th>流量</th>
                                        <th>水位</th>
                                        <th>流量</th>
                                        <th>水位</th>
                                        <th>流量</th>
                                        <th>水位</th>
                                        <th>流量</th>
                                        <th>水位</th>
                                        <th>流量</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr *ngFor="let data of editRowTable.data;let idx = index" [class]="{'even':idx % 2 === 1}" class="editable-row" (click)="selectedRow(data)">
                                        <td>{{ data.trName }}</td>
                                        <td>{{ data.wl }}</td>
                                        <td>{{ data.flow }}</td>
                                        <td>{{ data.wlFour }}</td>
                                        <td>{{ data.flowFour }}</td>
                                        <td>{{ data.wlEight }}</td>
                                        <td>{{ data.flowEight }}</td>
                                        <td>{{ data.wlTwelve }}</td>
                                        <td>{{ data.flowTwelve }}</td>
                                        <td>{{ data.wlSixteen }}</td>
                                        <td>{{ data.flowSixteen }}</td>
                                        <td>{{ data.wlTwenty }}</td>
                                        <td>{{ data.flowTwenty }}</td>
                                        <td>{{ data.wlTwentyFour }}</td>
                                        <td>{{ data.flowTwentyFour }}</td>
                                        <td>{{ data.dailyFlow }}</td>
                                    </tr>
                                    </tbody>
                                </nz-table>
                            </div>
                        </ng-container>
                        <ng-container *ngIf="tempType === '2'">
                            <div style="display: flex;align-items: stretch">
                                <div *ngFor="let key of objectKeys(dataGroup)" class="card-box">
                                    <nz-card [nzTitle]="key"
                                             class="table-card"
                                             (click)="selectedRow(dataGroup[key], key)">
                                        <nz-table
                                            class="main-table"
                                            [nzData]="dataGroup[key]"
                                            [nzFrontPagination]="false"
                                            nzBordered
                                            nzSize="middle">
                                            <thead>
                                            <tr class="custom-head">
                                                <th rowspan="2">名称</th>
                                                <th colspan="2">开机数量</th>
                                                <th rowspan="2">开机流量</th>
                                            </tr>
                                            <tr class="custom-head">
                                                <th>（大）</th>
                                                <th>（小）</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr *ngFor="let data of dataGroup[key];let idx = index" [class]="{'even':idx % 2 === 1}" class="editable-row">
                                                <td>{{ data.trName }}</td>
                                                <td>{{ data.workNum }}</td>
                                                <td>{{ data.workNumS }}</td>
                                                <td>{{ data.workFlow }}</td>
                                            </tr>
                                            </tbody>
                                        </nz-table>
                                    </nz-card>
                                </div>
                            </div>
                        </ng-container>
                    </div>
                </div>
                <div class="right-bottom-box">
                    <ng-container *ngIf="tempType === '1'">
                        <div class="charts-container">
                            <div *ngIf="hasLevelChart" class="charts-cell">
                                <div echarts [options]="basicOpts" [merge]="levelOpts"
                                     (chartInit)="levelChartInit($event)"></div>
                            </div>
                            <div *ngIf="hasFlowChart" class="charts-cell">
                                <div echarts [options]="basicOpts" [merge]="flowOpts"
                                     (chartInit)="flowChartInit($event)"></div>
                            </div>

                        </div>
                    </ng-container>

                    <ng-container *ngIf="tempType === '2'">
                        <div class="charts-container">
                            <div echarts [options]="basicOpts" class="charts-cell" (chartInit)="workNumChartInit($event)"></div>
                            <div echarts [options]="basicOpts" class="charts-cell" (chartInit)="workFlowChartInit($event)"></div>
                        </div>
                    </ng-container>
                </div>
            </div>
        </div>

    </div>
</div>

<nz-modal nzClassName="custom-modal" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
          (nzOnCancel)="onModalCancel()" (nzOnOk)="onModalCancel()" nzWidth="80%">
    <div style="margin-bottom: 10px">
        日期：
        <nz-date-picker [(ngModel)]="datePicker" (ngModelChange)="queryInfo($event)"></nz-date-picker>
    </div>

    <div *ngIf="tempType === '1'">
        <nz-table
            #groupingTable
            [nzData]="modalTableData"
            nzBordered
            nzSize="middle"
        >
            <thead>
            <tr>
                <th rowspan="2">名称</th>
                <th rowspan="2">警戒水位</th>
                <th rowspan="2">限定流量</th>
                <th colspan="2">4时</th>
                <th colspan="2">8时</th>
                <th colspan="2">12时</th>
                <th colspan="2">16时</th>
                <th colspan="2">20时</th>
                <th colspan="2">24时</th>
                <th rowspan="2">日均流量</th>
            </tr>
            <tr>
                <th>水位</th>
                <th>流量</th>
                <th>水位</th>
                <th>流量</th>
                <th>水位</th>
                <th>流量</th>
                <th>水位</th>
                <th>流量</th>
                <th>水位</th>
                <th>流量</th>
                <th>水位</th>
                <th>流量</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of groupingTable.data">
                <td>{{ data.trName }}</td>
                <td>{{ data.wl }}</td>
                <td>{{ data.flow }}</td>
                <td>{{ data.wlFour }}</td>
                <td>{{ data.flowFour }}</td>
                <td>{{ data.wlEight }}</td>
                <td>{{ data.flowEight }}</td>
                <td>{{ data.wlTwelve }}</td>
                <td>{{ data.flowTwelve }}</td>
                <td>{{ data.wlSixteen }}</td>
                <td>{{ data.flowSixteen }}</td>
                <td>{{ data.wlTwenty }}</td>
                <td>{{ data.flowTwenty }}</td>
                <td>{{ data.wlTwentyFour }}</td>
                <td>{{ data.flowTwentyFour }}</td>
                <td>{{ data.dailyFlow }}</td>
            </tr>
            </tbody>
        </nz-table>
    </div>

    <div *ngIf="tempType === '2'">
        <div style="display: flex;align-items: stretch">
            <div *ngFor="let key of objectKeys(modalDataGroup)" class="card-box">
                <nz-card [nzTitle]="key"
                         class="table-card">
                    <nz-table
                        [nzData]="modalDataGroup[key]"
                        [nzFrontPagination]="false"
                        nzBordered
                        nzSize="middle">
                        <thead>
                        <tr>
                            <th rowspan="2">名称</th>
                            <th colspan="2">开机数量</th>
                            <th rowspan="2">开机流量</th>
                        </tr>
                        <tr>
                            <th>（大）</th>
                            <th>（小）</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let data of modalDataGroup[key]" class="editable-row">
                            <td>{{ data.trName }}</td>
                            <td>{{ data.workNum }}</td>
                            <td>{{ data.workNumS }}</td>
                            <td>{{ data.workFlow }}</td>
                        </tr>
                        </tbody>
                    </nz-table>
                </nz-card>
            </div>
        </div>
    </div>

</nz-modal>

<nz-modal class="custom-modal" nzWidth="900" [(nzVisible)]="progressModalShow" nzTitle="干渠进口水位流量报送情况"
          (nzOnCancel)="closeProgressModal()" [nzFooter]="null">
    <nz-table
        #dataTable
        nzBordered
        nzShowPagination
        [nzPageSize]="10"
        [nzData]="inletProgressData"
        nzSize="middle">
        <thead>
        <tr>
            <th>管理处</th>
            <th>时段</th>
            <th>报送状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let row of dataTable.data">
            <td>{{ row.frName }}</td>
            <td>{{ row.hour }}</td>
            <td [ngClass]="{'green': row.statu === 2, 'red': row.statu === 1}">{{ row.status }}</td>
            <td>
                <a class="red" *ngIf="row.statu === 1">通知</a>
            </td>
        </tr>
        </tbody>
    </nz-table>
</nz-modal>
